<template>
  <a-modal
    title="批量添加空间"
    :visible="visible"
    width="35%"
    @cancel="$emit('update:visible', false)"
  >
    <a-row>
      <a-col :span="6">
        <a-steps :current="curStep" size="small" direction="vertical">
          <a-step title="导入文件" />
          <a-step title="格式检查" />
          <a-step title="批量上传" />
        </a-steps>
      </a-col>
      <a-col :span="18">
        <a-row class="startEndForm" v-if="curStep === 0">
          <a-upload
            :multiple="true"
            :before-upload="fileInput"
            :file-list="fileList"
            :show-upload-list="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          >
            <a-button type="primary"> 选择文件 </a-button>
            <span>{{ fileName }}</span>
          </a-upload>
          <a-button size="small" type="link">
            <a
              :href="`${$URLS.fileServer}/static/templates/空间管理导入模板.xlsx`"
              target="_blink"
              >下载模板</a
            >
          </a-button>
          <br />
          <br />
          <a-form-model layout="inline" :model="startEndForm">
            <a-form-model-item label="开始行">
              <a-input
                placeholder="请输入数据开始行"
                v-model.number="startEndForm.start"
                :disabled="true"
              ></a-input>
            </a-form-model-item>
            <a-form-model-item label="结束行">
              <a-input
                placeholder="请输入数据结束行"
                v-model.number="startEndForm.end"
              ></a-input>
            </a-form-model-item>
          </a-form-model>
        </a-row>

        <div v-else-if="curStep === 1">
          <a-list item-layout="vertical" size="small">
            <a-list-item>
              <span style="color: red" v-if="rowNumErr">
                有效数据行与输入不一致
              </span>
              <span style="color: green" v-else>有效数据行与输入一致</span>
            </a-list-item>
            <a-list-item>
              <span style="color: green" v-if="valNullErr.ok"
                >未检查出格式错误</span
              >
              <span style="color: red" v-else>
                {{ `${valNullErr.row}行${valNullErr.col}列单元格数据不能为空` }}
              </span>
            </a-list-item>
          </a-list>
        </div>
        <div v-else>
          <span>即将导入 {{ sheetData.length }} 条数据</span>
        </div>
      </a-col>
    </a-row>

    <template #footer>
      <a-button @click="$emit('update:visible', false)">取消</a-button>
      <a-button type="primary" @click="lastStep" :disabled="curStep === 0">
        上一步
      </a-button>
      <a-button type="primary" @click="nextStep">
        {{ curStep === 2 ? "确定" : "下一步" }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import xlsxParser from "@/utils/excelToJson";
import axios from "@/utils/axios";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
      sheetData: [],
      curStep: 0,
      startEndForm: { start: 3, end: 0 },
      labelCol: { span: 5 },
      wrapperCol: { span: 5 },
      rowNumErr: false,
      valNullErr: { ok: true, row: 0, col: 0 },
    };
  },
  computed: {
    fileName() {
      return this.fileList.length ? this.fileList[0].name : "请选择文件";
    },
  },
  methods: {
    fileInput(file) {
      this.fileList = [file];
      this.rowNumErr = false;
      this.valNullErr = { ok: true, row: 0, col: 0 };
      return false;
    },
    async submitRequest() {
      try {
        const result = await axios.post(
          "/pc/v1/users/multipleUsers",
          this.sheetData
        );
        console.log(result);
        this.$message.success("批量导入成功");
      } catch (error) {
        console.log(error);
        this.$message.error("批量导入失败");
      }
    },
    cancelRequest() {},
    lastStep() {
      this.curStep--;
      if (this.curStep < 0) {
        this.curStep = 0;
      }
    },
    nextStep() {
      switch (this.curStep) {
        case 0:
          if (
            this.fileList.length &&
            this.startEndForm.start !== 0 &&
            this.startEndForm.end !== 0
          ) {
            this.parseExcelData();
            this.curStep++;
          } else {
            this.$message.info("未选择文件或数据输入错误");
          }
          break;
        case 1:
          if (!this.rowNumErr && this.valNullErr.ok) {
            this.curStep++;
          }
          break;
        case 2:
          this.submitRequest();
          this.$emit("update:visible", false);
          break;
        default:
          break;
      }
    },
    checkFormat() {},
    parseExcelData() {
      xlsxParser(
        this.fileList[0],
        {
          dataCb: (data) => {
            this.sheetData = data;
          },
          rowNumErrCb: () => {
            this.rowNumErr = true;
          },
          valNullErrCb: (row, col) => {
            this.valNullErr.ok = false;
            this.valNullErr.row = row;
            this.valNullErr.col = col;
          },
        },
        {
          start: this.startEndForm.start,
          end: this.startEndForm.end,
        }
      );
    },
  },
};
</script>

<style scoped>
.startEndForm {
  padding: 0 20px;
}
</style>
